import React, { useState } from 'react';
import { Radio } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import DragContainer from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/Drag/DragContainer';
import { DL_CODE } from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/EnumConfig';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	dragOver: ( value: string ) => void;
	currentDragNode: any;
}

const GaugeData = ( props: IProps ) => {
	const { config, onValuesChange, form, dragOver, currentDragNode } = props;

	const [ type, setType ] = useState( config.data.gaugeType || 'basic' );

	const handleContentChange = ( event ) => {
		setType( event.target.value );
		form.setFieldsValue( { gaugeType: event.target.value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'data' );
	};

	return (
		<>

			<FormItem label="类型" name="gaugeType" initialValue={type}>
				<Radio.Group value={ type } onChange={ handleContentChange }>
					<Radio value="basic">基础仪表盘</Radio>
					{/*<Radio value="scale">刻度仪表盘</Radio>*/}
				</Radio.Group>
			</FormItem>

			<FormItem label="取值字段" name='measure'>
				<DragContainer
					form={ form }
					name='measure'
					tip='拖入度量'
					limit={1}
					type={ DL_CODE }
					config={ config }
					dragOver={ dragOver }
					currentDragNode={ currentDragNode }
					onValuesChange={ onValuesChange }
				></DragContainer>
			</FormItem>

			{/* 2.0版本 */}
			{/*<FormItem label="拆分字段" name='dimension'>*/}
			{/*	<DragContainer*/}
			{/*		form={ form }*/}
			{/*		name='dimension'*/}
			{/*		tip='拖入维度'*/}
			{/*		type={ WD_CODE }*/}
			{/*		config={ config }*/}
			{/*		dragOver={ dragOver }*/}
			{/*		currentDragNode={ currentDragNode }*/}
			{/*		onValuesChange={ onValuesChange }*/}
			{/*	></DragContainer>*/}
			{/*</FormItem>*/}
		</>
	);
};

export default React.memo( GaugeData );
